<template>
  <div class="table_view" ref="table_view">
    <Table
      v-if="columns.length"
      row-key="id"
      ref="table"
      :columns="columns"
      :height="tableHeight"
      :data="tableData"
      :loading="loadingState"
      @on-sort-change="onSortChange"
    >
    </Table>
    <div v-if="columns.length" style="margin: 10px;overflow: hidden">
      <Page
        style="align-self: flex-end;"
        :total="pagination.total"
        show-total
        show-sizer
        :page-size="pagination.pageSize"
        :current="pagination.current"
        :page-size-opts="pagination.pageSizeOptions"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import tableSort from './tableSort';

  export default {
    props: ['rowHeight', 'item', 'dataApkdb', 'loadingState'],
    data() {
      return {
        tableList: [],
        tableWidth: 0,
        tableHeight: 0,
        columns: [],
        pagination:{
          total:0,
          current: 1,
          pageSize: 10,
          pageSizeOptions: [10, 20, 30, 40],
        },
      }
    },
    watch: {},
    computed: {
      ...mapState('charts', ['chartList']),
      tableData () {
        if (this.pagination.total < 1){
          return []
        }
        const start = (this.pagination.current - 1) * this.pagination.pageSize
        const last = start + this.pagination.pageSize
        const end = last >= this.pagination.total ? this.pagination.total : last
        return  this.tableList.slice(start, end)
      }
    },
    methods: {
      onPageSizeChange (page) {
        this.pagination.pageSize = page;
      },
      onPageChange (page) {
        this.pagination.current = page;
      },
      onSortChange(sortObj) {
        this.tableList = tableSort(this.tableList,sortObj.key,sortObj.order);
        this.pagination.current = 1
      },
      initColumns () {
        this.columns.splice(0, this.columns.length);
        let dataMapColumns = this.item.dataMapping.columns;
        for (let i = 0; i < dataMapColumns.length; i ++) {
          this.columns.push({
            title: dataMapColumns[i].name,
            key: dataMapColumns[i].column,
            minWidth: 200,
            sortable: 'custom',
          })
        }
      },
      initTable () {
        if (this.item.remark) {
          this.$refs.table_view.style.height = "calc(100% - 75px)";
        } else {
          this.$refs.table_view.style.height = "calc(100% - 55px)";
        }
        this.tableWidth = this.$refs.table_view.clientWidth
        this.tableHeight = this.$refs.table_view.clientHeight - 35
        if (this.tableHeight > 400){
          this.pagination.pageSize = 20
        }
        let dataMapping = this.item.dataMapping,
            display = this.item.display;
        if (dataMapping.datasetIds.length == 1) {
          if (!this.dataApkdb[dataMapping.datasetIds[0]]) {
            return
          }
          this.tableList = this.dataApkdb[dataMapping.datasetIds[0]].map(item => {
            let itemVal = {},
                columns = dataMapping.columns;
            for (let i = 0; i < columns.length; i ++) {
              itemVal[columns[i].column] = item[columns[i].column]
            }
            return itemVal
          })
        } else {
          let dataJoin = dataMapping.join
          for (let i=0; i < dataJoin.length; i++) {
            let left = this.dataApkdb[dataJoin[i].left.datasetId],
                right = this.dataApkdb[dataJoin[i].right.datasetId],
                leftColumns = dataJoin[i].left.column,
                rightColumns = dataJoin[i].right.column
            if (left&&left.length || right&&right.length) {
              for (let j=0; j < left.length; j++) {
                let arr =[]
                for (let k=0; k < right.length; k++) {
                  if (left[j][leftColumns] == right[k][rightColumns]) {
                    arr.push(right[k])
                  }
                }
                if (arr.length!=0) {
                  arr.forEach(item =>{
                    let obj = {}
                    for(let key in item) {
                      obj[key] = item[key]
                    }
                    for(let key in left[j]) {
                      obj[key] = left[j][key]
                    }
                    this.tableList.push(obj)
                  })
                } else {
                  this.tableList.push(left[j])
                }
              }
            }
          }
        }
        let orderField = display.orderBy.split('-')[1];
        tableSort(this.tableList, orderField, display.order);
        this.pagination.total = this.tableList.length
      },
    },
    mounted() {
      // this.$nextTick(()=>{
        // setTimeout(()=>{
          this.initColumns()
          this.initTable()
        // },500)
      // })
    }
  }
</script>

<style scoped>
.table_view {
  height: 100%;
  width: 100%;
}

.ant-table-wrapper >>>.ant-spin-nested-loading {
  height: 100%;
}

.ant-table-wrapper >>>.ant-spin-container {
  height: 100%;
}

.ant-table-wrapper >>>.ant-table-content {
  height: 100%;
}

.ant-table-wrapper >>>.ant-table-scroll {
  height: 100%;
}

.ant-table-wrapper >>>.ant-table {
  height: 100%;
}

.ant-table-wrapper >>>.ant-table-body {
  overflow: visible !important;
}

.table_view >>> .v-center {
  background-color: #f0f;
}
.table_view >>> .v-lotp {
  background-color: #0f0;
}
</style>


